$_inputarea: #4a771e;
$_focusborder: #7bdd16;
$_bordergrey: rgba(234, 236, 246, 0.2);
$_error_red: red;
@import "base";

.form-masked-pin:focus + .bg-box-group .bg-box {
  box-shadow: 0 0 0 0.15rem rgba(0, 123, 255, .25);
}

.form-masked-pin + .bg-box-group .bg-box {
  width: 14%;
  height: 65px;
  margin-top: -65px;
  display: block;
  border-radius: 3px;
  border: 1px solid #777;
  background: #fff;
}

.form-masked-pin.error + .bg-box-group + .error-msg,
.form-masked-pcolorin.fail + .bg-box-group + .error-msg {
  color: $_error_red;
  display: block;
}

.vue-pincode-input-wrapper {
  @extend .vue_input_base_wrapper;

  &.v-pin-error .vue-pincode-input {
    box-shadow: 0 0 0 0.15rem $_error_red;
  }
}

.vue-pincode-input {
  @extend .vue_input_base;
  background: $_inputarea;
  border: 0.5px solid $_bordergrey;
  font-family: TLED3, 'Open Sans', Helvetica, Arial, sans-serif;

  &:focus {
    box-shadow: 0 0 0 0.15rem $_focusborder;
  }

}
